<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>Calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/css/backdoor.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/morris.css" type="text/css"/>
    <!-- Graph CSS -->
    <link href="${pageContext.request.contextPath}/css/font-awesome.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
    <!-- //jQuery -->
    <!-- calendar -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/monthly.css">
    <!-- //calendar -->

</head>

<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="mother-grid-inner">
            <!--header start here-->
            <jsp:include page="backdoor_header.jsp"/>
            <!--heder end here-->
            <!--导航条-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="${pageContext.request.contextPath}/backdoor/index">主页</a>
                    <i class="fa fa-angle-right"></i>
                    <a href="${pageContext.request.contextPath}/backdoor/calendar">日历</a>
                    <i class="fa fa-angle-right"></i>
                </li>
            </ol>
            <!-- grids -->
            <div class="grids">

                <div class="agile-calendar-grid">
                    <div class="page">

                        <div class="w3l-calendar-left">
                            <div class="calendar-heading">

                            </div>
                            <div class="monthly" id="mycalendar"></div>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <!-- //grids -->
            <!-- script-for sticky-nav -->
            <script>
                $(document).ready(function () {
                    var navoffeset = $(".header-main").offset().top;
                    $(window).scroll(function () {
                        var scrollpos = $(window).scrollTop();
                        if (scrollpos >= navoffeset) {
                            $(".header-main").addClass("fixed");
                        } else {
                            $(".header-main").removeClass("fixed");
                        }
                    });

                });
            </script>
            <!-- /script-for sticky-nav -->
            <!--inner block end here-->
            <!--copy rights start here-->
            <jsp:include page="backdoor_footer.jsp"/>
            <!--COPY rights end here-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <jsp:include page="backdoor_sidebar.jsp"/>
    <div class="clearfix"></div>
</div>

<!-- Bootstrap Core JavaScript -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->
<!-- calendar -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/monthly.js"></script>
<script type="text/javascript">
    $(window).load(function () {

        $('#mycalendar').monthly({
            mode: 'event'

        });

        $('#mycalendar2').monthly({
            mode: 'picker',
            target: '#mytarget',
            setWidth: '250px',
            startHidden: true,
            showTrigger: '#mytarget',
            stylePast: true,
            disablePast: true
        });

        switch (window.location.protocol) {
            case 'http:':
            case 'https:':
                // running on a server, should be good.
                break;
            case 'file:':
                alert('Just a heads-up, events will not work when run locally.');
        }

    });
</script>
<!-- //calendar -->
</body>

</html>